@function sizeScalePx($px){
  @return $px * .5;
}


body { color: #fff; font-family:  "Microsoft Yahei";  background: #000000 url(../img/bg.jpg) no-repeat center center;}
.section{ position: relative; max-width: 640px; margin: 0 auto; overflow: hidden;}
.box {max-width: 640px; margin: 0 auto; text-align: center;}
.p0 { padding-top: 15%; background: url("../img/5-1.png") no-repeat center 10% ; background-size: 202px;

  .img-box { background:#000000; width: sizeScalePx(300px);  margin: 0  auto 10%; position: relative;
    .pic1 { width:100%;border:1px solid #fff; height: sizeScalePx(430px); background-image: url(../img/userphoto/1.jpg); background-position:  center center; background-repeat: no-repeat; background-size: auto 100%;   }

    .pic2 { width: 35px; height: 75px; position: absolute; top: -40px; left:45%;  margin-left: -10px;z-index:-1; }
  }
  p { margin: 0; margin-bottom: 5px; }

  .t2{ margin: 2.5% 0; font-size: 14px;}
  .t5{ margin: 5.5% 0 3.5%; font-size: 14px;}
  .t4 {margin: 5.5% 0 3.5%; font-size: 16px;}
  .t6{ margin: 2.5% 0; font-size: 16px;}
  .t7{ display:  none;}

}
.p0-1{display: none; position: absolute;; width: 100%; top: 0; height: 100%; background: rgba(0,0,0,.82);
  .t1 {}
}


.p1 { display: none;
  .t1 { padding-top: 20%; padding-bottom: 10%;}
  .t3 { position: absolute; bottom: 0; left: 0; width: 100%;}
  .t4 { position: absolute; bottom: 0; left: 0; width: 100%; text-align: right;}
}

.p3 {display: none;
  .t1{ position: absolute; bottom: 0;
    .t2{ position: absolute; bottom:12%; width: 100%;}
    .t3 {position: absolute; bottom: 5%;width: 100%;}
  }
}

.p3-1{display: none;
  .t1 { padding-top: 10%; padding-bottom: 10%;}
  .t2 { padding-bottom: 10%;}
  .t4 { position: absolute; text-align: right; top: 10px; right: 10px; width: 100%; z-index: 1;}
}


.p4{display: none; background: url("../img/5.png") no-repeat center 45%; background-size: 100%;
  .t1 {padding: 20% 0;
    .star-box {width: sizeScalePx(460px); background: #000000; border: solid 3px #fff; height: sizeScalePx(426px); margin: 0 auto; overflow: hidden;}
  }
  .t2{ position: absolute; width: 100%; bottom: 0;}
}

.p5{display: none; height: 100%;
  .t1 { padding-top: 10%; padding-bottom: 10%;}
  .t2 { padding-bottom: 10%;}
  .t3 { padding-bottom: 5%;}
}


.p5-1{ display: none;padding-top: 5%;
  .info-box { border: solid 1px #fff;  width: 86.5%; margin: 0 auto; background: #000;}
  .t1 { padding-top: 0%; }
  .t2 { width: 87%; margin: 5% auto;border: solid 1px #ffffff; height:24px; background: #000000;background: url(../img/t/6-1/2.png) no-repeat center center; background-size: auto 100%; }
  .t3 {
    img { display: block;}
  }
  .t4 { width: 100%; position: absolute; bottom: 0px; }
  .t5 { width: 100%; position: absolute; text-align: right; top: 10px; right: 10px;}
}
.p5-2{ display: none; width: 100%; height: 100%; background: url("../img/t/6-1/cp.jpg") no-repeat; background-size: cover; position: absolute; top: 0; left: 0;}




.p6 {display: none;
  .t1 { padding-top: 10%; padding-bottom: 10%;}
  .t2 { padding-bottom: 10%;}
  .form-box{ width: 84.3%; border: solid 1px #ffffff; height:24px; background: #000000; margin: 0 auto; margin-bottom: 5%;
    input { display: block; width: 100%; outline: none; background: none; font-size: 12px; line-height: 17px; text-align: center; color: #fff; border: none;}
  }
  .f1 {background: url(../img/t/7/1.png) no-repeat center center; background-size: auto 100%;}
  .f2 {background: url(../img/t/7/2.png) no-repeat center center; background-size: auto 100%;}
  .f3 {background: url(../img/t/7/3.png) no-repeat center center; background-size: auto 100%;}
  .f4 {background: url(../img/t/7/4.png) no-repeat center center; background-size: auto 100%;}

  .t4{ position: absolute; bottom: 0; width: 100%;}
}

